<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/',name:'Index'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>添加标签</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin-top: 50px">
      <el-col :span="20" :offset="2">
        <el-form ref="tagForm" :model="tagForm" label-width="80px" :rules="rules" @submit.native.prevent>
          <el-form-item label="标签名称" prop="tagName">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-input v-model.trim="tagForm.tagName" placeholder="请输入分类名称..." clearable
                          @keydown.enter.native="save('tagForm')"></el-input>
              </el-col>
              <el-col :span="5">
                <el-button type="success" @click="save('tagForm')"><i class="iconfont icon-tianjia2 btn-icon"></i>添加
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "TagSave",
  data() {
    return {
      tagForm: {
        tagName: "",
        userId: this.$store.getters.getUserInfo.id
      },
      rules: {
        tagName: [
          {required: true, message: "请输入标签名称", trigger: 'blur'},
          {max: 50, message: "最多输入30个字符", trigger: "blur"}
        ]
      }
    }
  },
  methods: {
    save(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.$put(this.$api.TAG_SAVE_URL, this.tagForm).then(res => {
            if (res.data.code == 200) {
              this.$notify({
                title: "成功",
                message: res.data.message,
                type: "success"
              });
              this.$router.push({
                path: "/admin/tag",
                name: "TagList"
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.btn-icon {
  font-size: 16px !important;
}
</style>
